<template>
  <div class="home-container">
    <div class="search">
        <form action="/">
          <van-search
            placeholder="请输入搜索关键词"
            @focus="onFocus"
          />
        </form>
    </div>
    <div>
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" style="width:100%;height:100%" />
          </van-swipe-item>
        </van-swipe >
    </div>
    <div class="component-list-main" id="list-content">
      <van-tabs   @click="onChangeProductType"  >
        <van-tab :title="productType.name" v-for="(productType,index) in productTypes"  v-bind:key="index">
          <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoadMore"
            >

              <van-grid :border="false" :column-num="2">

                <van-grid-item  v-for="(item,index) in products"  :key="index">
                  <van-image :src="item.productImg" style="width:150px;height:150px" />
                  <div class="info bgw align-center">
                      <div class="name">{{item.productName}}</div>
                      <div class="brief">{{item.productDesc}}</div>
                      <div class="price">
                        {{item.productShopPrice}}<span>起</span><span class="price old"><s>{{item.productMarketPrice}}</s></span>
                      </div>
                      <router-link :to="'/productDetails/'+item.productSn"><div class="buybtn mauto"> 立即购买</div></router-link>
                    </div>
                </van-grid-item>

              </van-grid>
            </van-list>
          </van-pull-refresh>
        </van-tab>

      </van-tabs>

    </div>

    <div>
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="search">分类</van-tabbar-item>
        <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ],
      active:0,
      products: [],
      loading: false,
      finished: false,
      productQuery:{
        productTypeId:0,
        limit:10,
        page:1
      },
      totalPages:0,
      productTypes:[{id:1,name:"热销"},{id:2,name:"新品"},{id:3,name:"精品"},{id:4,name:"促销"}]
    }
  },
  watch: {

  },
  mounted(){
    let winHeight = document.documentElement.clientHeight                          //视口大小
    document.getElementById('list-content').style.height = (winHeight - 46) +'px'  //调整上拉加载框高度
  },
  created(){
    this.productQuery.productTypeId=this.productTypes[0].id;
    this.initProduct();
  },
  methods: {
     onFocus:function(){
       console.log(111)
     },
     onRefresh() {
      setTimeout(() => {
        this.products.length=0;
        this.finished = false;
        this.loading = false;
         this.productQuery.page=1;
        this.initProduct();
        //this.count++;
      }, 500);
    },
     onLoadMore() {
       this.loading = false;
       setTimeout(() => {
         console.log(this.totalPages, this.productQuery.page)
          if (this.totalPages== this.productQuery.page) {
            this.finished = true;
          }else{
            this.productQuery.page=this.productQuery.page+1;
            this.initProduct();

          }

      }, 500);
    },
    initProduct(){
       this.loading = true;
        let encryptParams=this.productQuery;

        this.$store.commit('setEncrypt',encryptParams);
        var _self=this;

        _self.$store.dispatch('productPage',_self.productQuery).then(response => {
           _self.loading = false;
          // _self.$toast('数据加载完毕');
          let data=response.data;
          _self.totalPages=response.pages;
          console.log(response);
          for(let index in data){
            _self.products.push(data[index]);
          }

        }).catch(() => {
        })
    },
    onChangeProductType(event){
      this.productQuery.productTypeId=this.productTypes[event].id;
      this.products.length=0;
      this.finished = false;
      this.loading = false;
      this.productQuery.page=1;
      this.initProduct();
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .search{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
  }
  .van-grid-item__content{
    padding: 5px
  }
  .component-list-main .van-cell__left-icon{
    color: red;
  }
  .component-list-main{
    margin-bottom:50px
  }
   .align-center{
    text-align: center
  }
  .component-list-main .info {
      padding: .2rem .27rem;
      width:85%
  }
  .component-list-main .name {
      font-size: 16px;
      color: rgba(0,0,0,.87);
      height: 20px;
      line-height: 20px;
      overflow: hidden;

  }
  .component-list-main .brief {
      margin-top: 5px;
      font-size: 13px;
      line-height: 13px;
      color: rgba(0,0,0,.54);
  }
  .component-list-main .price {
    font-size: 13px;
    color: #ea625b;
    height: 1.5em;
    line-height: 1.5em;
    position: relative;
    display: inline-block;
  }
  .component-list-main .price .old {
      display: inline-block;
      margin: 0 .1rem;
      font-size: 12px;
      color: rgba(0,0,0,.54);
  }
  .component-list-main .buybtn {
    background: #ea625b;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    font-size: 13px;
    padding: 7px 0;
    font-weight: 700;
}
</style>

